<template>
    <div class="orderContainer">
        <el-table :data="orderList" v-loading="isLoading">
            <el-table-column prop="orderID" label="订单编号" width="80"></el-table-column>
            <el-table-column prop="title" label="书名"></el-table-column>
            <el-table-column prop="price" label="价格" width="80">
                <template #default="scope">
                    {{ scope.row.price.toFixed(2) }}
                </template>
            </el-table-column>
            <el-table-column prop="name" label="收货人姓名" width="100"></el-table-column>
            <el-table-column prop="telephone" label="收货人联系方式" width="130"></el-table-column>
            <el-table-column prop="orderAddress" label="收货地址"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button
                        type="primary"
                        link
                        @click="
                            isDetail = true;
                            currentDetail = scope.row;
                        "
                        >订单详情</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-dialog v-model="isDetail" title="订单详情">
            <div>订单编号：{{ currentDetail.orderID }}</div>
            <div>书名：{{ currentDetail.title }}</div>
            <div>价格：{{ currentDetail.price }}</div>
            <div>收货人姓名：{{ currentDetail.name }}</div>
            <div>收货人联系方式：{{ currentDetail.telephone }}</div>
            <div>收货地址：{{ currentDetail.orderAddress }}</div>
        </el-dialog>
    </div>
</template>

<script>
import { userStore } from "@/store/user";
import service from "@/utils/request";

export default {
    data() {
        return {
            orderList: [],
            isLoading: true,
            isDetail: false,
            currentDetail: {},
        };
    },
    methods: {
        async refresh() {
            this.isLoading = true;
            // 获取已完成订单信息（orderState=4）
            await service({
                method: "get",
                url: `/order/selectByOrderState?orderState=4`,
                headers: {
                    token: userStore().token,
                },
            }).then((res) => {
                res.data.data.forEach((item) => {
                    Object.assign(item, ...item.book, item);
                    delete item["book"];
                    // console.log(item);
                });
                this.orderList = res.data.data;
            });
            this.isLoading = false;
        },
    },
    beforeMount() {
        this.refresh();
    },
};
</script>

<style scoped></style>
